<template>
	<view class="container">
		<view class="top">
			<uni-icons size="50" type="staff"></uni-icons>
			<view class="title">{{ enterprise.name }}</view>
		</view>
		<view class="registrationNo">{{ enterprise.registrationNo }}</view>
		<view class="tag-view">
			<uni-tag size="small" :text="enterprise.operationStatus" :type="tagType" />
		</view>
		<view class="introduction">
			<text class="text">简介：{{ background.historicalInfo }}</text>
			<text class="more" @click="showMsg">更多</text>
		</view>
		<view class="msg">
			<view class="item">
				<view class="title">法定代表人</view>
				<view class="body">{{ enterprise.legalRepresentative }}</view>
			</view>
			<view class="item">
				<view class="title">注册资本</view>
				<view class="body">{{ enterprise.registeredCapital }}</view>
			</view>
			<view class="item">
				<view class="title">成立时间</view>
				<view class="body">{{ formatDate(enterprise.establishTime) }}</view>
			</view>
		</view>
		<view class="address" @click="showAddress">
			<uni-icons type="location-filled"></uni-icons>
			<view class="body">{{ enterprise.registeredAddress }}</view>
		</view>
		<uni-section type="line" class="mb-10" title="基本信息" padding="5px 0 5px 10px">
			<view class="body">
				<view class="item" @click="goMsgDetail('executive')">
					<uni-icons size="30" type="staff"></uni-icons>
					<view class="title">高管信息</view>
				</view>
				<view class="item" @click="goMsgDetail('patent')">
					<uni-icons size="30" type="navigate"></uni-icons>
					<view class="title">专利信息</view>
				</view>
				<view class="item" @click="goMsgDetail('trademarks')">
					<uni-icons size="30" type="paperplane"></uni-icons>
					<view class="title">商标信息</view>
				</view>
			</view>
		</uni-section>
		<uni-section class="mb-10" type="line" padding="0 0 5px 10px" title="背景信息">
			<view class="body">
				<view class="item" @click="goMsgDetail('lawsuits')">
					<uni-icons size="30" type="info"></uni-icons>
					<view class="title">法律诉讼</view>
				</view>

				<view class="item" @click="goMsgDetail('administrativePenalties')">
					<uni-icons size="30" type="minus"></uni-icons>
					<view class="title">行政处罚</view>
				</view>
				<view class="item" @click="goMsgDetail('dishonestyRecords')">
					<uni-icons size="30" type="paperplane"></uni-icons>
					<view class="title">失信记录</view>
				</view>
				<view class="item" @click="goMsgDetail('movablePropertyMortgages')">
					<uni-icons size="30" type="flag"></uni-icons>
					<view class="title">动产抵押</view>
				</view>
			</view>
		</uni-section>
		<uni-section class="risk" title="企业风险监测" type="line">
			<view class="body">
				<view class="left">天眼风险</view>
				<view class="right">
					<view class="top">该企业风险评估为 {{ risk }}</view>
					<scroll-view class="scroll" scroll-x="true">
						<view class="item">
							<view class="text">法律诉讼</view>
							<view class="risk">
								该公司触犯法律诉讼条数为
								<span style="color: red">{{ background.lawsuits?.length }}</span>
								条
							</view>
						</view>
						<view class="item">
							<view class="text">行政处罚</view>
							<view class="risk">
								该公司触犯行政处罚条数为
								<span style="color: red">{{ background.administrativePenalties?.length }}</span>
								条
							</view>
						</view>
						<view class="item">
							<view class="text">失信记录</view>
							<view class="risk">
								该公司的失信记录条数为
								<span style="color: red">{{ background.dishonestyRecords?.length }}</span>
								条
							</view>
						</view>
						<view class="item">
							<view class="text">动产抵押</view>
							<view class="risk">
								该公司触犯动产抵押条数为
								<span style="color: red">{{ background.movablePropertyMortgages?.length }}</span>
								条
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</uni-section>

		<view class="bottom-bar">
			<view class="index" @click="backIndex">
				<uni-icons type="home" size="30"></uni-icons>
				首页
			</view>
			<view class="favorite" @click="changeStatus">
				<uni-icons v-if="isFavorite" type="star-filled" size="30"></uni-icons>
				<uni-icons v-else type="star" size="30"></uni-icons>
				收藏
			</view>
		</view>
		<uni-popup ref="introductionPopup" background-color="#fff">
			<view class="popup-content">
				<text class="text">简介：{{ background.historicalInfo }}</text>
			</view>
		</uni-popup>
		<uni-popup ref="addressPopup" background-color="#fff">
			<view class="popup-content">
				<text class="text">地址：{{ enterprise.registeredAddress }}</text>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
import { ref, computed, onMounted, reactive } from 'vue';
import { getEnterpriseDetail, getEnterpriseId, calcRisk, addFavorite, removeFavorite } from '../../api/enterprise.js';
import { onLoad } from '@dcloudio/uni-app';
import { formatDate } from '../../utils/common.js';

const tagType = computed(() => {
	switch (enterprise.value.operationStatus) {
		case '正常':
			return 'primary';
		case '存续':
			return 'success';
		case '吊销':
			return 'warning';
		case '注销':
			return 'error';
		case '停业':
			return 'default';
		default:
			return 'default';
	}
});
const isFavorite = ref(false);
const introductionPopup = ref(null);
const addressPopup = ref(null);
const enterpriseId = ref('');
const enterprise = ref({});
const background = ref({});
const risk = ref('');
const showMsg = () => {
	introductionPopup.value.open('bottom');
};
const showAddress = () => {
	addressPopup.value.open('bottom');
};
onLoad((options) => {
	console.log(options);
	enterpriseId.value = options.id;
});
const userInfo = JSON.parse(uni.getStorageSync('user_info') || '{}');
const changeStatus = async () => {
	if (isFavorite.value) {
		const res = await removeFavorite({ id: enterpriseId.value, userId: userInfo.id });
		uni.showToast({
			title: '取消收藏成功',
			icon: 'none'
		});
	} else {
		const res = await addFavorite({ id: enterpriseId.value, userId: userInfo.id });
		uni.showToast({
			title: '收藏成功',
			icon: 'none'
		});
	}
	getBackgroundMsg();
	getEnterprise();
	calcRiskMsg();
};

const backIndex = () => {
	uni.switchTab({
		url: '/pages/index/index'
	});
};
const getBackgroundMsg = async () => {
	const res = await getEnterpriseDetail({ id: enterpriseId.value });
	background.value = res.data;
};

const calcRiskMsg = async () => {
	const res = await calcRisk({ id: enterpriseId.value });
	risk.value = res.data.riskLevel;
};

const getEnterprise = async () => {
	const res = await getEnterpriseId({ id: enterpriseId.value, userId: userInfo.id });
	isFavorite.value = res.data.isFavorite;
	enterprise.value = res.data;
};
onLoad(() => {
	getBackgroundMsg();
	getEnterprise();
	calcRiskMsg();
});

const goMsgDetail = (value) => {
	if (value === 'lawsuits') {
		uni.navigateTo({
			url: `/pages/lawsuits/lawsuits?id=${enterpriseId.value}`
		});
	} else if (value === 'administrativePenalties') {
		uni.navigateTo({
			url: `/pages/administrativePenalties/administrativePenalties?id=${enterpriseId.value}`
		});
	} else if (value === 'dishonestyRecords') {
		uni.navigateTo({
			url: `/pages/dishonestyRecords/dishonestyRecords?id=${enterpriseId.value}`
		});
	} else if (value === 'movablePropertyMortgages') {
		uni.navigateTo({
			url: `/pages/movablePropertyMortgages/movablePropertyMortgages?id=${enterpriseId.value}`
		});
	} else if (value === 'trademarks') {
		uni.navigateTo({
			url: `/pages/trademarks/trademarks?id=${enterpriseId.value}`
		});
	} else if (value === 'patent') {
		uni.navigateTo({
			url: `/pages/patent/patent?id=${enterpriseId.value}`
		});
	} else if (value === 'executive') {
		uni.navigateTo({
			url: `/pages/executive/executive?id=${enterpriseId.value}`
		});
	}
};
</script>

<style lang="scss" scoped>
.container {
	padding: 30rpx;
	.top {
		display: flex;
		align-items: center;
		.title {
			font-size: 40rpx;
			margin-left: 20rpx;
			white-space: normal;
			word-break: break-all;
		}
	}
	.registrationNo {
		margin-left: 110rpx;
		font-size: 25rpx;
		margin-bottom: 10rpx;
	}
	.tag-view {
		margin-left: 110rpx;
	}
	.introduction {
		display: flex;
		align-items: center;
		font-size: 25rpx;
		padding-bottom: 20rpx;
		margin-top: 10rpx;
		border-bottom: 1px solid #ccc;
		.text {
			display: inline-block;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			word-break: break-all; /* 避免多段文本的影响 */
			width: 91%;
			color: #4d4b56;
		}
		.more {
			color: #007aff;
		}
	}
	.popup-content {
		height: 40vh;
		overflow: auto;
		padding: 30rpx;
		padding-top: 50rpx;
	}
	.msg {
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		.item {
			width: 30vw;
			display: flex;
			flex-direction: column;
			align-items: center;
			.title {
				margin-bottom: 10rpx;
				font-size: 30rpx;
				color: #909a99;
			}
		}
	}
	.address {
		display: flex;
		align-items: center;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.mb-10 {
		.body {
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
			align-items: center;

			.item {
				width: 20vw;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				margin-right: 15rpx;
				margin-bottom: 30rpx;
				.title {
					margin-top: 20rpx;
				}
			}
		}
	}
	.risk {
		// margin-bottom: 500rpx;
		.body {
			height: 300rpx;
			margin-left: 30rpx;
			display: flex;
			.left {
				width: 60rpx;
				height: 100%;
				border-radius: 10rpx;
				text-align: center;
				line-height: 75rpx;
				background-color: #feecea;
				color: red;
				font-size: 35rpx;
				margin-right: 30rpx;
			}
			.right {
				display: flex;
				flex-direction: column;
				width: calc(100% - 100rpx);
				.top {
					padding: 20rpx;
					font-size: 35rpx;
				}
				.scroll {
					height: 100%;
					white-space: nowrap;
					width: 100%;
					.item {
						display: flex;
						display: inline-block;
						width: 300rpx;
						// height: calc(100% - 90rpx);
						justify-content: flex-start;
						padding: 20rpx;
						margin-right: 20rpx;
						background-color: #edf2fa;
						border-radius: 15rpx;
						.text {
							margin-bottom: 20rpx;
							color: red;
							font-size: 40rpx;
						}
						.risk {
							white-space: wrap;
							font-size: 30rpx;
						}
					}
				}
			}
		}
	}
	.bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100rpx;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
		.index,
		.favorite {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin-right: 30rpx;
		}
		.favorite {
			margin-left: 100rpx;
		}
	}
}
</style>
